<template>
  <view class="wz_black whe_maxv pad_10 boxs sy_bg tck">
    <view class="ba_white bor_10 xyy mag_t-10 ccgl" style="height: calc(100vh - 100px)">
      <view class="wh_f pad_15 boxs" style="border-radius: 10px 10px 0 0;border-bottom: 1px solid #f0f2ee">
        <view class="flex_1 wz_black fz_14 em">
          <view style="color: #191919"><text>已选商品</text></view>
        </view>
        <view><text @click="delShow" class="wz_lv fz_14">删除</text></view>
      </view>
      <view v-if="list.length<1" class="jz_flex" style="height: 60%">
        <view class="wz_jz">
          <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
          <view class="mag_t-20">快去加购商品吧!</view>
        </view>
      </view>

      <view class="wh_f mag_t-15 pad_10_0 boxs bor_10" v-for="(item,index) in list" :key="index">
        <view @click="addDetail(item)" class="wh_f" style="width: 100px">
          <view class="jz_flex" style="width: 30px">
            <view class=" whe_max jz_flex" @click.stop="checkboxChange(item)" v-if="item.is_checked==0">
              <image src="../../static/icon/zfk.png" style="width: 20px;height: 20px"/>
            </view>
            <view class=" whe_max jz_flex" @click.stop="checkboxChange(item)" v-if="item.is_checked==1">
              <image src="../../static/icon/chenggong.png" style="width: 20px;height: 20px"/>
            </view>
          </view>
          <view class="flex_1">
            <view class="img_zfx">
              <image :src="item.goods.image[0]"></image>
            </view>
          </view>
        </view>
        <view class="flex_1 pad_0_10 boxs">
          <view class="fz_16 em ccsl_1">
            <view class="wh_f">
              <view @click="addDetail(item)" style="padding-right: 20px">{{item.goods.name}}</view>
              <view class="flex_1"></view>
            </view>
          </view>
          <view class="pad_5_0 wz_hui fz_12 wh_f">
            <view class="wh_f">
              <view @click="addDetail(item)" style="padding-right: 20px">规格: {{ item.goods.specs }} </view>
              <view class="flex_1"></view>
            </view>
          </view>
          <view class="wh_f">
            <view @click="addDetail(item)" class="wz_red flex_1 bhh">
              <text class="fz_16 bottomdq em">¥{{item.goods.price}}</text>
              <text class="scx wz_hui fz_14 bottomdq" style="margin: 0 0 2px 5px">
                ¥{{ item.goods.re_price }}
              </text>
            </view>
            <view class="bjq">
<!--              @change.stop="valChange($event,item,index)"-->
              <up-number-box class="centerdq" button-size="26" buttonWidth="26" bgColor="#3a9e5f"
                             @change.stop="valChange($event,item,index)"
                             @blur="valChange($event,item,index)"
                             v-model="item.amount"
                             :min="0"></up-number-box>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="height: 70px"></view>
    <!--    底部结算-->
    <view class="pm ba_white box_yy" style="width: 100%;height:60px;left: 0;bottom: 0">
      <view class="wh_f he_max">
        <view v-if="false" class="flex_1 wh_f czjz_flex ">
          <view class="wz_jz xd" style="width: 90px">
            <img v-if="shopList.length<1" src="../../static/img/clz_1.png" style="width: 60px;height: 50px"/>
            <img v-if="shopList.length>0" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/03/xcx_1751509991_6PMXlVQxyK.png" style="width: 60px;height: 50px"/>
            <view v-if="String(shopNum)!=='0'" class="jd wz_white ba_red fz_10 jz_flex"
                  style="right: 10px;top: 0;width: 20px; height:20px;border-radius: 50px">
              <view class="disp">{{shopNum}}</view>
            </view>
          </view>
          <view class="flex_1 czjz_flex">
            <view>
              <view v-if="shopList.length===0" class=" fz_12" style="color:black">
                <text class="">￥</text>
                <text class="fz_16 em">{{ parseInt(OrderAge) }}</text>
                <text class="em">.{{ String(OrderAge).split('.')[1] }}</text>
              </view>
              <!--              <view v-if="shopList.length>0" class=" fz_12" style="color:#e63946;">-->
              <!--                <text class="">￥</text>-->
              <!--                <text class="fz_16 em">{{ parseInt(OrderAge) }}</text>-->
              <!--                <text class="em">.{{ String(OrderAge).split('.')[1] }}</text>-->
              <!--              </view>-->
              <!--              <view class="wz_hui fz_10 mag_t-5">免配送费</view>-->
            </view>
          </view>
        </view>
        <view class="flex_1 wh_f">
          <view @click="checkboxMax" class="czjz_flex boxs wz_hui" style="padding-left: 10px;width: 74px">
            <image class="centerdq" v-if="!qx" src="../../static/icon/zfk.png"
                   style="width: 20px;height: 20px"/>
            <image v-if="qx" src="../../static/icon/chenggong.png"
                   style="width: 20px;height: 20px"/>
            <text class="centerdq mag_l-5 xt fz_14">全选</text>
          </view>
          <view class="czjz_flex flex_1 wh_f">
            <view class="flex_1"></view>
            <view style="padding: 0 10px">
              <text class="fz_12 wz_hui">已选 {{shopList.length}} 件, </text>
              <text class="fz_12 wz_black"> 合计: </text>
              <view class="disp">
                <text class="fz_10 wz_red">¥ </text>
                <text class="fz_16 wz_red">
                  <up-count-to fontSize="16" :startVal="age1" :endVal="age2" :decimals="2" color="#e63946" :duration="500"></up-count-to>
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="czjz_flex he_max">
          <view @click="submitOrder" class="jz_flex wz_white bor_25 mag_r-10 fz_14"
                style="background-color: #e63946;width: 90px;height: 36px">
            <text>去结算</text>
          </view>
        </view>
      </view>
    </view>

    <!--    删除弹窗-->
    <up-popup :safeAreaInsetBottom="false"
              @close="close"
              @open="open"
              customStyle="width:70%;border-radius: 20px"
              :show="show" mode="center">
      <view>
        <view style="padding: 15px">
          <view class="fz_16 wz_jz em pad_b_10">
            <text>确认将这{{count.length}}个宝贝删除?</text>
          </view>
          <view class="split_2 pad_10_0 wz_jz">
            <view>
              <text class="bor_1_hui bor_20 fz_12 em" @click="show=false"
                    style="background-color: #d5f0dd;color: #3a9e5f;
                  padding: 5px 30px 6px">取 消</text>
            </view>
            <view>
              <text class="bor_1_hui bor_20 fz_12 em"
                    @click="shopClose"
                    style="background-color: #3a9e5f;color:white;
                  padding: 5px 30px 6px">确 定</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
    <!--    消息提示组件-->
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script>
import {
  addCartAmount,
  addShoppingCart,
  delShopCart,
  getShopCartCount,
  settlementDetail,
  shoppingCartList, updacartChecked
} from "../../Api/shop";
export default {
  name:"index",
  data(){
    return{
      list:[],
      radiovalue:[],
      qx:null,
      show:false,
      sum:0,
      age:0,
      age1:0,
      age2:0,
      shopList:[],
      delshow:false,
      del_id:null,
      count:[]
    }
  },
  onShow(){
    this.shopList = []
    // shoppingCartList().then((res)=>{
    //   this.list = res.data
    // })
    this.getList()
    this.getShopCartCount()
  },
  methods:{
    blurInput(){
      console.log('失去焦点了')
    },
    //前往商品详情
    addDetail(e){
      const params = { id:e.goods.id}; // 待传递的参数
      uni.navigateTo({
        url: `/shophome/shopDetail/index?id=${params.id}`
      });
    },
    // 购物车数量
    getShopCartCount(){
      getShopCartCount().then(res => {
        if(res.data.count>0){
          uni.setTabBarBadge({
            index: 2,
            text: String(res.data.count)
          })
        }else{
          uni.removeTabBarBadge({
            index:2
          })
        }
      })
    },
    // 关闭清空弹窗
    close(){
      this.show = false
      this.delshow = false
    },
    //删除购物车商品
    shopClose(){
      let data = [];
      this.list.forEach(item=>{
        if(item.is_checked === 1){
          data.push(item.id)
        }
      })
      console.log('需要删除的商品',data)
      // this.list.forEach((item)=>{
      //   data.push(item.id)
      // })
      delShopCart({
        ids:data
      }).then(res=>{
        this.show = false
        this.getList()
      })
    },
    // 点击删除弹窗
    delShow(){
      this.count  = this.list.filter(item=>item.is_checked === 1)
      if(this.count.length > 0){
        this.show= true
      }else{
        this.showToast('没有选择商品')
      }
    },
    // 删除商品
    delShop(e){
      delShopCart({
        ids:[e]
      }).then(res=>{
        this.delshow = false
        this.getList()
      })
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
      // 设置半秒后自动隐藏提示
      // setTimeout(() => {
      //   this.$refs.uToastRef.hide(); // 这里假设有一个 hide 方法来隐藏提示
      // }, 700);
    },
    // 全选
    checkboxMax(){
      let ids = []
      if(this.list.length > 0){
        if(!this.qx){
          this.list.forEach(item=> {
            ids.push(item.id)
          })
          // 修改选中状态
          updacartChecked({
            ids:ids,
            is_checked:!this.qx?1:0
          }).then(res=>{this.getList()})
          // 计算价格
          this.countShop(this.list)
        }else{
          this.list.forEach(item=> {
            ids.push(item.id)
          })
          // 修改选中状态
          updacartChecked({
            ids:ids,
            is_checked:!this.qx?1:0
          }).then(res=>{
            this.getList()
          })
          // 计算价格
          this.countShop(this.list)
        }
      }else{
        this.qx = !this.qx
      }

    },
    // 获取购物车列表
    getList(){
      shoppingCartList().then((res)=>{
        this.list = res.data
        this.sum = 0
        this.getShopCartCount()
        this.shopList = res.data.filter(item=>item.is_checked == 1)
        if(this.shopList.length === res.data.length){
          this.qx = true
        }else{
          this.qx = false
        }
        if(this.shopList.length>0){
          this.countShop(this.shopList)
        }else{
          this.age2 = 0
          // this.age1 = this.age2
        }
      })
    },
    // 修改商品是否选中
    checkboxChange(e) {
      updacartChecked({
        ids:[e.id],
        is_checked:e.is_checked === 1?0:1
      }).then(res=>{
        this.getList()
        console.log('选中结果',res)
      })
      // this.list[index].checked =! this.list[index].checked
      // this.shopList = this.list.filter(item=>item.checked === true)
      // if(this.shopList.length>0){
      //   this.countShop(this.shopList)
      // }else{
      //   this.age = 0
      // }
    },
    // 计算价格
    countShop(e){
      settlementDetail({
        act_id:0,
        data:e
      }).then(res=>{
        this.age2 = res.data.pay_price_no_pei
      })
    },
    // 添加/删除购物车商品
    valChange(e,item,index){
      console.log(e,item,index)
      if(e.value>item.amount){
        addCartAmount({
          id:item.id,
          amount:e.value
        }).then(res=>{
          this.getList()
        })
      }else{
        addCartAmount({
          id:item.id,
          amount:e.value
        }).then(res=>{
          this.getList()
          if(e.value == 0){
            this.showToast('删除成功!')
          }
        })
      }
      console.log(e,item,index)
    },
    // 去结算
    submitOrder(){
      if(this.shopList.length>0){
        let list = encodeURIComponent(JSON.stringify(this.shopList))
        uni.navigateTo({
          url:'/porder/orderPay/index?list='+list
        })
      }else{
        this.showToast('请至少选择一件结算商品!')
      }
    }
  },
  // 1.分享到微信
  onShareAppMessage() {
    return{
      title:'鲜到家族云享集市',
      path:'/pages/index/index'
    }
  },
  //2.配置分享到朋友圈
  onShareTimeline(){
    return{
      title: '鲜到家族云享集市',                //分享的标题
      query: '/pages/index/index',     //点击分享链接之后进入的页面路径
      imageUrl: '/static/img/logo.jpg' //分享发送的链接图片地址
    }
  }
}
</script>
<style scoped lang="scss">



.bjq{
  ::v-deep.u-number-box__plus{
    border-radius: 50px!important;
    color: white;
  }
  ::v-deep.u-number-box__minus{
    border-radius: 50px!important;
    background-color: #d5f0dd!important;
    .uicon-minus{
      color: #3a9e5f!important;

    }
  }
  ::v-deep.u-number-box__input{
    background-color: transparent!important;
  }
  ::v-deep.u-icon__icon{
    color: white!important;
  }
}

</style>
